<template>
  <div>
    <h1>我的Vue国际化项目</h1>
    <label>请选择语言: </label>
    <label v-for="local in languages">
      <input v-model="currentLocale" :value="local" type="radio" @change="handleLanguageChange">
      {{ local }}
    </label>

    <p>{{ msg }}</p>
    <p>{{ $t('欢迎2') }}</p>
    <p>{{ $t('key.static') }}</p>
    <p>{{ t('key.static2') }}</p>
    <!--<p>{{ tc('key.static3') }}</p>-->

    <i18n path="key.component"></i18n>
    <i18n-t keypath="key.component2"></i18n-t>
    <Translate keypath="key.component3"></Translate>

    <p>{{ d(new Date(), 'long') }}</p>
    <p>{{ n(1000, 'currency') }}</p>

    <button @click="test">测试setup中国际化</button>
  </div>
</template>

<script setup>
import {useI18n} from 'vue-i18n'
import {ref} from "vue";
import {dynamicActivate} from "@/i18n";

const loading = ref(false)
const {t, locale, d, n, i18n} = useI18n()

const languages = ['en', 'zh']
const currentLocale = ref(locale)
const props = defineProps({
  msg: {type: String}
})
const handleLanguageChange = async (event) => {
  currentLocale.value = event.target.value;  // 先更新当前选择的语言
  locale.value = currentLocale.value
  loading.value = true
  try {
    await dynamicActivate(locale.value)
  } finally {
    loading.value = false
  }
}
const test = () => {
  alert(t("欢迎setup"))
}

</script>